<template>
	<u-sticky style="top: 0;" id="sticky" bgColor="#F5F5F5">
		<w-navbar :fixed="false" title="我的藏品"></w-navbar>
		<view class="search plr-10 ptb-10">
			<view class="flex flex-ai-center flex-js-sb">
				<view style="flex:1;">
					<w-tabs :scrollable="false" :activeStyle="activeStyle" :tabList="tabList" :lineWidth="26" :itemStyle="tabStyle" :lineHeight="6" lineBg="linear-gradient( 90deg, #FF7F43 0%, #FF2D23 100%)" @change="types=$event.types;$emit('changetab',$event)"></w-tabs>
				</view>
				<!-- 右侧icon -->
				<w-icon class="rightIcon" name="search4" size="24" @click.stop="openIpt" v-if="types==2"></w-icon>
				<view style="width: 24px;" v-else></view>
			</view>
			<!-- 搜索 -->
			<view class="search_con" :class="{ 'search_con_start':animation==1,'search_con_end':animation==2 }">
				<u-input 
				v-model="keywords" 
				@input="iptChange" 
				@focus="showPop2=false" 
				@confirm="getSearchList" 
				:customStyle="iptStyle" 
				clearable 
				placeholder="搜索内容" 
				border="none" shape="circle" fontSize="14" color="#000">
					<w-icon slot="prefix" name="search3" size="18" @click="getSearchList"></w-icon>
					<view slot="suffix" class="font-size-14 font-color-222" @click="closeIpt">返回</view>
				</u-input>
			</view>
		</view>
		<u-popup :show="showPop" @close="showPop=false" mode="top" round="10" zIndex="-1" :overlayStyle="{top:popTop}" :customStyle="{top:popTop}">
			<view class="searcList" @touchmove.stop @touchstart.stop>
				<view class="item flex flex-ai-center" v-for="(item,idx) in searcList" :key="idx" @tap="changeSearch(item)">
					<text 
					v-for="(j,idx) in splitName(item.name)"
					class="font-size-14 font-color-convention" 
					:class="{'font-color-textPrimary':keywords.includes(j)}">{{ j }}</text>
				</view>
				<view v-if="isSearcListEmpty" class="item flex-center font-size-14 font-color-describe">暂无数据~</view>
				<w-loading :type="searchLoading"></w-loading>
			</view>
		</u-popup>
		<!-- <view class="plr-70 pb-10">
			<w-tabs :tabList="tabList2" :lineWidth="0" :itemStyle="tabStyle" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></w-tabs>
		</view> -->
	</u-sticky>
</template>

<script>
	import { likeCollection } from '@/api/collection/index.js';
	let timer = null;
	export default {
		data() {
			return {
				animation:'', // 1 右到左 2左到右
				tabStyle:{
					'padding':'0',
					'height':'34px',
					'position':'relative',
					'z-index': 1,
					"width":"200rpx"
				},
				iptStyle:{
					'height': '72rpx',
					'padding': '0 24rpx',
					'background-color': '#fff'
				},
				inactiveStyle:{
					color: '#ababab',
					fontSize: '14px'
				},
				activeStyle:{
					color: '#222222',
					fontWeight: '500',
					fontSize: '16px'
				},
				types:2,
				tabList:[
					{ name:'藏品',types:2 },
					// { name:'盲盒',types:1 },
					{ name:'已售出',types:3 },
					// { name:'已赠送',types:4 }
				],
				// tabList2:[
				// 	{ name:'全部' },
				// 	{ name:'藏品' },
				// 	{ name:'盲盒' },
				// 	{ name:'已售出' },
				// ],
				keywords:'',
				showPop:false,
				showPop2:false,
				popTop:0,
				searcList:[],
				isSearcListEmpty:false,
				searchLoading:'none'
			};
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('#sticky').boundingClientRect(data => {
				this.popTop = data.height + 'px';
			}).exec();
		},
		methods:{
			// 分割名字
			splitName(e) {
				return e.split('')
			},
			iptChange(e){
				if(this.showPop2) return;
				uni.$u.debounce(()=>{
					e.length && this.getSearchList();
				}, 500)
			},
			getSearchList() {
				this.searchLoading = 'loading';
				this.isSearcListEmpty = false;
				this.showPop = !!this.keywords;
				likeCollection({ keyword:this.keywords }).then(res=>{
					this.searchLoading = 'none';
					this.searcList = res.data;
					!res.data.length && (this.isSearcListEmpty=true);
				}).catch(()=>{ this.searchLoading = 'none' })
			},
			
			// 关闭搜索框
			closeIpt() {
				this.showPop = false;
				this.animation = 2;
				this.$emit('closeSearch')
				this.clearIptAn()
			},
			
			// 打开搜索
			openIpt() {
				this.animation = 1;
			},
			
			// 清除动画
			clearIptAn() {
				timer && clearTimeout(timer);
				timer = setTimeout(()=>{
					this.animation = '';
				},1000)
			},
			
			changeSearch(item){
				this.$emit('changeSearch',item.collection_id);
				this.keywords = item.name;
				this.showPop2 = true;
				this.showPop = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	#sticky /deep/ .u-sticky__content {
		// background-image: url('@/static/bg/my-bg.png');
		// background-position: top;
		// background-size: 100% auto;
	}
	#sticky /deep/ .u-fade-enter-active{
		z-index: -1 !important;
	}
	.search{
		width: 100%;
		position: relative;
		overflow: hidden;
		>.rightIcon{
			position: absolute;
			right: 32rpx;
			top: calc(50% - 24rpx);
		}
		>.search_con{
			width: 100%;
			// height: 100%;
			padding: 0 32rpx;
			position: absolute;
			left: 100vw;
			top: calc(50% - 36rpx);
			z-index: 999999;
		}
		>.search_con_start{
			animation-name: iptAnimation;
			animation-fill-mode:forwards;
			animation-duration: 1s;
		}
		>.search_con_end{
			animation-name: iptAnimation2;
			animation-fill-mode:forwards;
			animation-duration: 1s;
		}
	}
	.searcList{
		width: 100%;
		max-height: 50vh;
		overflow-y: scroll;
		padding: 20rpx 32rpx;
		
		>.item{
			width: 100%;
			height: 100rpx;
		}
	}
	@keyframes iptAnimation {
	  from { left: 100vw; }
	  to { left: 0; }
	}
	@keyframes iptAnimation2 {
	  from { left: 0; }
	  to { left: 100vw; }
	}
</style>
